<style lang="scss" scoped>

.tabs {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.tab {
  margin: 5px;
  padding: 5px;
  margin-left: 10px;
  width: 20%;
  background-color: rgb(240, 245, 253);
  border-radius: 50px;
  text-align: center;
}
.active {
  background-color: #00be8c;
  color: #fff;
}
.tab1 {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.box {
  width: 100vw;
  height: 100%;
  display: flex;
  .left {
    flex: 8;
    height: 100%;
    overflow: auto;
    div {
      width: 100%;
    }
  }
  .right {
    height: 100%;
    overflow: auto;
    flex: 7;
    div {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 46px;
      align-items: center;
    }
  }
}
.activeIndex {
  background: #ccc;
}
</style>
<template>


<van-dropdown-menu ref="menuRef">
    <van-dropdown-item :title="text" v-model="value">
      <div class="tab1">
        <div
          v-for="(tab, index) in listTap"
          :key="index"
          class="tab"
          :class="{ active: currentIndex === index }"
          @click="tabClick(tab, index)"
        >
          {{ tab }}
        </div>
        <div
          class="shanXuan"
          style="
            padding: 20px;
            background-color: #fff;
            height: 50px;
            width: 100%;
          "
        ></div>

        <van-button type="success" block round> 确定 </van-button>
      </div>
    </van-dropdown-item>

    <van-dropdown-item
      :title="text1"
      ref="itemRef"
      class="menu2"
      v-model="value1"
    >
      <div class="tabs">
        <div
          v-for="(tab, index) in listTap1"
          :key="index"
          class="tab"
          :class="{ active: currentIndex === index }"
          @click="tabClick1(tab, index)"
        >
          {{ tab }}
        </div>
        <div
          class="shanXuan"
          style="
            padding: 20px;
            background-color: #fff;
            height: 50px;
            width: 100%;
          "
        ></div>
      </div>

      <div>
        <van-button type="success" block round >
          确定
        </van-button>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>




</template>
<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps([])

import { reactive, ref } from 'vue'
import type { DropdownItemOption } from 'vant'
import axios from 'axios'
import type { ListState, doctorState } from '@/interface'
import { areaList } from '@vant/area-data'

// 城市
const showcity = ref(false)
const showPopupcity = () => {
  showcity.value = true
}
const paramsData = reactive({
  pageCode:1,
  pageSize:10,
  lv:'',
  city:'',
  state:'',
  admin:'',
  search:''
})

const activeIndex = ref(0)
const currentIndexcity = ref(0)
const city = ref('北京')
const arr1 = ref<string[]>(['北京市'])

const getCity = (v: string) => {
  arr1.value = []

  for (let key in areaList.city_list) {
    if (v.slice(0, 2) == key.slice(0, 2)) {
      arr1.value.push(areaList.city_list[key])
      console.log(v)
    }
  }
}


const handCity = (v: string, i: number) => {
  currentIndex.value = i
  showcity.value = false
  city.value = v
  paramsData.city = v
  console.log(paramsData)
  axios.get('/api/nosocomium/list', { params: paramsData }).then(res => {
    console.log(res)
    doctorState.value = res.data.data
    listData.value = res.data.data
  })
}

const show = ref(false)
const showPopup = () => {
  show.value = false
}
const active = ref(0)
const value = ref(0)
const value1 = ref(0)
const activeIndexcity=ref(0)
const currentIndex = ref(0)
const listData = ref<ListState[]>([])

const doctorState = ref([])
const text = ref('医院类型')
const listTap = ref(['全部', '公立', '私立'])

const socoList = ref([])
const text1 = ref('医院等级')
const listTap1 = ref([
  '不限',
  '三级甲等',
  '三级乙等',
  '三级丙等',
  '二级甲等',
  '二级乙等',
  '二级丙等',
  '一级甲等',
  '一级乙等',
  '一级丙等',
])

const getList = () => {
  axios
    .get('/api/nosocomium/list', {
      params: paramsData,
    })
    .then(res => {
      const { data } = res.data
      console.log(data)
      listData.value = data
    })
}
getList()

const tabClick = (tab: string, index: number) => {
  currentIndex.value = index
  text.value = tab
  if (tab == '全部') {
    tab = ''
  }
  paramsData.state = tab
  axios.get('/api/nosocomium/list', { params: paramsData }).then(res => {
    console.log(res)
    doctorState.value = res.data.data
    listData.value = res.data.data
  })
}

const tabClick1 = (tab: string, index: number) => {
  currentIndex.value = index
  text1.value = tab
  if (tab == '不限') {
    tab = ''
  }
  paramsData.lv = tab
  axios
    .get('/api/nosocomium/list', { params: paramsData })
    .then(res => {
      console.log(res)
      socoList.value = res.data.data
      listData.value = res.data.data
    })
}
</script>

